.post-header {
  position: relative;
  text-align: center;

  .post-title {
    margin: 0;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: $font-family-serif-weight;
    font-family: $font-family-serif;

    .icon {
      width: 1.6rem;
      height: 1.6rem;
      margin-right: 0.3rem;
    }

    .post-title-link {
      position: relative;
      padding: 0.7rem 1.2rem;

      .icon {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 0.4rem;
      }

      &::before, &::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        opacity: 0;
        border: 2px solid;
        transition: 0.3s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
      }

      &::before {
        top: 0;
        left: 0;
        border-width: 2px 0 0 2px;
        transform: translate3d(10px, 10px, 0);
      }

      &::after {
        right: 0;
        bottom: 0;
        border-width: 0 2px 2px 0;
        transform: translate3d(-10px, -10px, 0);
      }

      &:hover::before, &:hover::after {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }
  }
}

.post-edit-link {
  padding: 0 0.2rem;
  color: $gray;

  .icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}